@extends('home.layouts.app')

@section('title','新增联系人')

<!-- 设置token -->
<meta name="csrf-token" content="{{csrf_token()}}">

@push('css')
<!-- 页面独立的 -->
<link rel="stylesheet/less" href="{{URL::asset('assets/css/ContactAdd.less')}}" />
@endpush

@section('content')
<!-- 导航 -->
<header>
    <div class="left">
        <a href="javascript:history.back(-1)">
            <span class="glyphicon glyphicon-menu-left back"></span>
            <span>返回</span>
        </a>
    </div>
    <div class="center">
        新建联系人
    </div>
</header>
<!-- 信息录入 -->
<div class="info">
    <h3 class="title wow fadeInUp">信息录入</h3>

    <p class="desc wow fadeInUp" data-wow-delay="200ms">
        您可在本页录入您的联系信息，录入成功后名片将会出现在首页。
    </p>
</div>

<form class="contact wow fadeInUp" data-wow-delay="300ms" action="{{url('home/contact/addform')}}" method="post">
    @csrf
    <div class="form-group">
        <label for="nickname">姓名</label>
        <input type="text" class="form-control @error('nickname') is-invalid @enderror" name="nickname" id="nickname" placeholder="请输入姓名" required />
        @error('nickname')
            <div class="alert alert-danger">{{ $message }}</div>
        @enderror
    </div>

    <div class="form-group">
        <label for="phone">手机</label>
        <input type="text" class="form-control @error('phone') is-invalid @enderror" name="phone" id="phone" placeholder="请输入手机" required />
        @error('phone')
            <div class="alert alert-danger">{{ $message }}</div>
        @enderror
    </div>

    <div class="form-group">
        <label for="gender">性别</label>
        <select class="form-control" name="gender">
            <option value="0">保密</option>
            <option value="1">男</option>
            <option value="2">女</option>
        </select>
    </div>

    <div class="form-group">
        <label for="province">省份</label>
        <select class="form-control" name="province" id="province">
            <option>请选择</option>
            @foreach($province as $item)
                <option value="{{$item->code}}">{{$item->name}}</option>
            @endforeach
        </select>
    </div>

    <div class="form-group">
        <label for="city">市</label>
        <select class="form-control" name="city" id="city">
            <option>请选择</option>
            
        </select>
    </div>

    <div class="form-group">
        <label for="district">区</label>
        <select class="form-control" name="district" id="district">
            <option>请选择</option>
            
        </select>
    </div>

    <div class="form-group">
        <label for="type">分类</label>
        <select class="form-control @error('typeid') is-invalid @enderror" name="typeid" id="type">
            <option>请选择</option>
            @foreach($TypeList as $item)
                <option value="{{$item->id}}">{{$item->name}}</option>
            @endforeach
        </select>
        @error('typeid')
            <div class="alert alert-danger">{{ $message }}</div>
        @enderror
    </div>

    <div class="form-group">
        <label for="remark" style="display: block;">备注</label>
        <!-- <input type="text" class="form-control" id="remark" placeholder="请输入备注" /> -->
        <textarea rows="10" class="form-control @error('remark') is-invalid @enderror" name="remark" id="remark" placeholder="请输入备注"></textarea>
        @error('remark')
            <div class="alert alert-danger">{{ $message }}</div>
        @enderror
    </div>

    <div class="action">
        <button class="btn">提交</button>
    </div>
</form>
@endsection

@push('script')
<script>
    $('#province').change(function(){
        let code = $(this).val()

        $.ajax({
            type:'post',
            url:`{{url('home/user/area')}}`,
            data:{
                code
            },
            headers:{
                'X-CSRF-TOKEN':$('meta[name="csrf-token"]').attr('content')
            },
            dataType:'json',
            success:function(res){

                if(res.code == 0)
                {
                    return false
                }

                let option = ''

                for(let item of res.data)
                {
                    option += `<option value="${item.code}">${item.name}</option>`
                }

                $('#city').html(option)

                GetCity(res.data[0].code,'#district')

            }
        })
    })

    $('#city').change(function(){
        let code = $(this).val()

        $.ajax({
            type:'post',
            url:`{{url('home/user/area')}}`,
            data:{
                code
            },
            headers:{
                'X-CSRF-TOKEN':$('meta[name="csrf-token"]').attr('content')
            },
            dataType:'json',
            success:function(res){

                if(res.code == 0)
                {
                    return false
                }

                let option = ''

                for(let item of res.data)
                {
                    option += `<option value="${item.code}">${item.name}</option>`
                }

                $('#district').html(option)

            }
        })
    })

    function GetCity(code,element)
    {
        $.ajax({
            type:'post',
            url:`{{url('home/user/area')}}`,
            data:{
                code
            },
            headers:{
                'X-CSRF-TOKEN':$('meta[name="csrf-token"]').attr('content')
            },
            dataType:'json',
            success:function(res){

                if(res.code == 0)
                {
                    return false
                }

                let option = ''

                for(let item of res.data)
                {
                    option += `<option value="${item.code}">${item.name}</option>`
                }

                $(element).html(option)

            }
        })
    }
</script>
@endpush